<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="main"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    var myChart = echarts.init(document.getElementById('main'))
    myChart.setOption({
      title: {
        text: 'ECharts入门',
        link: 'http://www.baidu.com',
        target: 'self',
        sublink: 'http://www.baidu.com',
        backgroundColor: "pink",
        borderWidth: 5,
        x: 'center',//标题居中
        subtext: '副标题',
        textStyle: {
          color: 'yellow',
          fontSize: 30,
        },
        subtextStyle: {
          color: "blue",
          fontSize: 10
        }

      },
      tooltip: {
        //触发类型
        trigger: 'axis',//item图形触发
        //坐标轴指示器
        axisPointer: {
          type: 'cross' //line显示一根线(默认) shadow阴影效果 cross十字准星
        },
        // showContent:false,//悬浮弹框(默认true)

        // 悬浮层样式
        backgroundColor: 'pink',
        borderColor: 'red',
        borderWidth: 5,
        textStyle: {
          color: 'yellow'
        },
        //自定义提示框信息
        formatter(params) {
          // console.log(params)
          for (var i = 0; i < params.length; i++) {
            return '名字' + params[i].name + '--价格:' + params[i].data.value + '--生产日期:' + params[i].data.date
          }
        }
      },
      legend: {
        show: true,//设置图列的开启或者关闭
        icon: "circle",
        top: '10%',//设置位置
        itemWidth: 10,
        itemHeight: 20,
        textStyle: {
          color: 'red',
          fontSize: 30,
          backgroundColor: 'yellow'
        }
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {
      },
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [
            { 'value': '5', "date": '2021-1-1' },
            { 'value': '20', "date": '2020-2-1' },
            { 'value': '36', "date": '2020-3-1' },
            { 'value': '10', "date": '2020-4-1' },
            { 'value': '10', "date": '2022-1-1' },
            { 'value': '20', "date": '2023-1-1' },

          ]
        }
      ]
    })

  },
};
</script>
<style>
#main {
  width: 500px;
  height: 500px;
}
</style>